<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page isELIgnored="false" %>
<html>
<head>
    <title>Title</title>
    <%@include file="/comm/head.jsp"%>

    <style>
        .layout-logo{
            width: 50px;
            height: 30px;
            border-radius: 3px;
            float: left;
            position: relative;
            top: 15px;
            left: 120px;
        }
        .layout-nav{
            margin-left:200px;
            letter-spacing: 10px;
            font-size:24px;

        }

        .collapsed-menu{
           overflow: hidden;
            background-color:#000 !important;
        }
        .collapsed-menu .ivu-menu-light{
            background-color:#000 !important;
        }
     .ivu-menu-dark{
         background: #b7e3ff;
     }
        .ivu-layout-sider-trigger{
            background: #b7e3ff;
        }
        .ivu-layout-sider-children,.ivu-menu-light{
            background:#ecf8ff;
        }
        .ivu-layout{
            background:#ecf8ff;
        }
        body{
            margin: 0;
            padding: 0;
            background: url("/attach/蓝云2.jpg");
        }
        /*ivu-menu-light*/
    </style>
</head>
<body >
<div id="root" style="background: #ecf8ff">
    <img src="" alt="">
    <modal v-model="updateFlag" title="修改密码" <%--@on-ok="update()"--%>>
        <i-form :label-width="80"  :model="user" :rules="ruleValidate" ref="user" style="padding:30px">
            <form-item label="原密码" prop="password">
                <i-input v-model="user.password" size="large"/>
            </form-item>
            <form-item label="新密码" prop="newPas">
                <i-input v-model="user.newPas" size="large"/>
            </form-item>
            <%--<form-item label="密码">
                <i-input v-model="user.password" size="large"/>
            </form-item>--%>
            <form-item label="确认密码" prop="checkNewPas">
                <i-input v-model="user.checkNewPas" size="large"/>
            </form-item>

        </i-form>
        <div slot="footer">
            <i-button type="primary" size="large" @click="update('user')">确定</i-button>
        </div>

    </modal>
    <div class="layout">
        <Layout>
            <Header>
                <i-Menu mode="horizontal" theme="dark" active-name="1">
                   <%-- <div class="layout-logo">
                    <Avatar src="https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar"></Avatar>
                    </div>--%>
                    <div class="layout-nav">
                        <h3 style="color:white">蓝云ERP超市管理系统</h3>
                        <span style="position:relative;top: -55px;left:990px; color: white;font-size:15px ">欢迎你,${loginUser.username} </span>
                        <i-button type="primary" size="small" style="position:relative;top:-54px;left:990px;" @click="logout()">退出</i-button>
                        <i-button type="primary" size="small" style="position:relative;top:-54px;left:990px;" @click="updatePassword()">修改密码</i-button>
                    </div>
                </i-Menu>
            </Header>
            <Layout>
                <sider collapsible collapsible-width="1%"  v-model="isCollapsed" :style="{background: '#fff'}" :class="menuitemClasses">
                  <i-menu active-name="1-2" theme="light" width="auto" :open-names="['1']">

                      <c:forEach var="p01" items="${menuList}" varStatus="s01">

                          <Submenu name="${s01.index}">
                              <template slot="title">
                                  <Icon type="${p01.icon}"></Icon>
                                  ${p01.name}
                              </template>
                             <c:forEach var="p02" items="${p01.children}" varStatus="s02">
                                 <Menu-Item name="${s01.index}-${s02.index}">
                                     <a href="${p02.url}"target="main">${p02.name}</a>
                                 </Menu-Item>
                             </c:forEach>
                          </Submenu>
                      </c:forEach>




                      <%--     <Submenu name="1">
                             <template slot="title">
                                 <Icon type="ios-navigate"></Icon>
                                 系统管理
                             </template>
                             <Menu-Item name="1-1">
                                 <a href="sys/role/index"target="main">角色管理</a>
                             </Menu-Item>
                             <Menu-Item name="1-2">
                              <a href="sys/user/index" target="main"> 员工管理</a>
                             </Menu-Item>
                             <Menu-Item name="1-3">部门管理</Menu-Item>
                         </Submenu>
                         <Submenu name="2">
                             <template slot="title">
                                 <Icon type="ios-keypad"></Icon>
                                基本数据管理
                             </template>
                             <Menu-Item name="2-1">商品管理</Menu-Item>
                             <Menu-Item name="2-2">商品类型管理</Menu-Item>
                             <menu-Item name="2-3">采购商管理</menu-Item>
                         </Submenu>
                         <Submenu name="3">
                             <template slot="title">
                                 <Icon type="ios-analytics"></Icon>
                                 采购管理
                             </template>
                             <Menu-Item name="3-1">采购申请</Menu-Item>
                             <Menu-Item name="3-2">采购订单查询</Menu-Item>
                         </Submenu>--%>
                    </i-menu>
                </sider>
                <Layout :style="{padding: '0 24px 24px'}">
                    <i-Content :style="{minHeight: '500px', background: '#fff'}">
                        <iframe name="main" width="100%" height="800px" frameborder="0"></iframe>
                    </i-Content>
                </Layout>
            </Layout>
        </Layout>
    </div>


</div>


<script>
    new Vue({
        el:"#root",
        data(){
            return{
                menus:[],
                isCollapsed: false,
                updateFlag:false,
                user:{
                    checkNewPas:'',
                    newPas:'',
                    password:'',
                    username:'${loginUser.username}'
                },
                ruleValidate: {
                    password: [
                        {

                            required: true,
                            trigger: "blur",
                            validator: (rule, value, callback) => {
                                asyValid(rule, value, callback)
                            }

                        }
                    ],
                    newPas:  [{
                        required: true,
                        trigger: 'blur',
                        validator: (rule, value, callback) => {
                            validatePass(rule, value, callback)
                        }
                    }],
                    checkNewPas:  [{
                        required: true,
                        trigger: 'blur',
                        validator: (rule, value, callback) => {
                            validatePass2(rule, value, callback)
                        }
                    }],
                    /*  userCode:
                                 [{
                                     required: true,
                                     trigger: 'blur',
                                     validator: (rule, value, callback) => {
                                         asyValid(rule, value, callback)
                                     }
                                 }],*/

                },
                const :asyValid=(rule,value,callback)=>{
                    if (!value) {
                        return callback(new Error("请输入原密码"));
                    }else {
                        let un=this.user.username
                        let pw=this.user.password;
                        // console.log(json)
                        axios.post('/sys/user/sp',{
                            password : pw,
                            username :un,
                            headers: {'Content-Type': 'application/x-www-form-urlencoded'}   //跨域
                        }).then(function (dat){
                            if (dat.data == "0"){
                                return callback(new Error('原密码不正确，请重新输入!'))

                            } else{
                                return callback();
                            }

                        }).catch((e)=>{
                            iview.Message.error(`校验失败${e}`);
                            return callback()
                        })
                    }
                },
                const :validatePass = (rule, value, callback) => {
                    if (value =='') {
                        return callback(new Error("请输入密码"));
                    }else if(value == this.user.password){
                        callback(new Error('新密码不能与原密码相同!'))
                    }else if (value.toString().length < 6 || value.toString().length > 18) {
                        callback(new Error("密码长度必须为6-18位"));
                    }else{
                        callback()
                    }
                },


                const :validatePass2 = (rule, value, callback) => {
                    if (value == "") {
                        callback(new Error("请再次输入密码"));
                    } else if (value != this.user.newPas) {
                        callback(new Error("两次输入密码不一致!"));
                    } else {
                        callback();
                    }
                },
            }
        },

        computed: {
            menuitemClasses: function () {
                return [
                    'menu-item',
                    this.isCollapsed ? 'collapsed-menu' : ''
                ]
            }
        },
        methods:{
            logout(){
                location.href = "${pageContext.request.contextPath}/logout";/*location.href是重定向get方式提交 */
            },
            updatePassword(){
                this.updateFlag=true;
            },
            update(user){

                this.$refs[user].validate((valid) => {
                    if (valid) {

                       axios.post(`${ctx}/sys/user/up`,this.user)
                            .then(({data})=>{
                                this.updateFlag=false;//关闭模态框
                                // iview.Message.success({content:data.msg});
                                if(data.msg="修改密码成功!"){
                                    iview.Message.success("修改成功,2秒后跳转到登录页！");
                                    setTimeout(() => {
                                        this.logout();//调用跳转到登陆页的方法
                                    }, 2000);
                                }

                            });
                    } else {
                        this.$Message.error('请看好您的错误选项!');
                    }
                })

            },



        },
       /* mounted(){
            this.createMenu();
        }*/
    })
</script>
</body>
</html>
